import React from 'react';
import LeftNav from '../../../../node_modules/material-ui/lib/left-nav';
import dialogManager from './../dialogManager.jsx';
import HttpRequest from './../HttpRequest.js';
import EventProxy from '../../lib/eventproxy.js';

var project_created = [];
var project_participate = [];
var project_created_info = [];
var project_participate_info = [];
var ProjectListNav = React.createClass({
    getInitialState: function () {
        return {
            open: false,
            project_created_info: [],
            project_participate_info: [],
            project_created_item: [],
            project_participate_item: []
        }
    },
    mouseOver: function (index, role) {
        if (role == "owner") {
            document.getElementById("project_item_" + index).style.backgroundColor = "#ccc";
        } else {
            document.getElementById("project_item_participation_" + index).style.backgroundColor = "#ccc";
        }
    },
    mouseOut: function (index, role) {
        if (role == "owner") {
            document.getElementById("project_item_" + index).style.backgroundColor = "";
        } else {
            document.getElementById("project_item_participation_" + index).style.backgroundColor = "";
        }
    },
    componentWillMount: function (cb) {
        var ep = new EventProxy();
        ep.fail(function (err) {
            toastr.error(null, "获取项目信息出现错误");
        });
        ep.after('project_info_found', 2, function () {
            if(cb && typeof(cb) == "function"){
                cb();
            }
        });
        HttpRequest.getCurrentUser().success(function (res) {
            if (res.code == 0) {
                HttpRequest.getProjects(res.data.shortid, 'owner').success(function (msg) {
                    if (msg.code != 500) {
                        project_created_info =  project_created = msg.data;
                        ep.emit('project_info_found');
                    }

                }.bind(this)).error(function (msg) {
                    console.log("获取工程列表失败:" + msg);
                });
                HttpRequest.getProjects(res.data.shortid, 'member').success(function (msg) {
                    if (msg.code != 500) {
                        project_participate_info = project_participate = msg.data;
                        ep.emit('project_info_found');
                    }
                }.bind(this)).error(function (msg) {
                    console.log("获取工程列表失败:" + msg);
                });
            } else {
                toastr.error(null, res.message);
            }
        }.bind(this)).error(function (error) {
            console.log(error);
        });
    },

    getProjectList: function () {
        var MyCreationProject = [];
        var MyParticipation = [];
        this.componentWillMount(function(){
            project_created_info.map(function (item, index) {
                MyCreationProject.push(
                    <div id={"project_item_"+index}
                         key={index}
                         className={"project_list_item"}
                         onClick={this.projectSelected.bind(this,item._id)}
                         onMouseOver={this.mouseOver.bind(this,index,"owner")}
                         onMouseOut={this.mouseOut.bind(this,index,"owner")}
                    >
                        <p style={{fontFamily:'Microsoft YaHei'}}>
                            <i style={{marginRight: "15px"}}
                               className="fa fa-hand-o-right"
                               ariaHidden="true"/>
                            {item.title}
                        </p>

                    </div>
                );
            }.bind(this));

            project_participate_info.map(function (item, index) {
                MyParticipation.push(
                    <div id={"project_item_participation_"+index}
                         className={"project_list_item"}
                         onClick={this.projectSelected.bind(this,item._id)}
                         onMouseOver={this.mouseOver.bind(this,index,"member")}
                         onMouseOut={this.mouseOut.bind(this,index,"member")}
                    >
                        <p style={{fontFamily:'Microsoft YaHei'}}>
                            <i style={{marginRight: "15px"}}
                               className="fa fa-hand-o-right"
                               ariaHidden="true"/>
                            {item.title}
                        </p>

                    </div>
                );
            }.bind(this));
            this.setState({
                project_created_item: MyCreationProject,
                project_participate_item: MyParticipation
            });
        }.bind(this));

    },
    projectSelected: function (project_id) {
        HttpRequest.getProject(project_id).success(function (msg) {
            this.setState({open: !this.state.open}, function () {
                this.props.callbackParent(msg);
            });

        }.bind(this)).error(function (msg) {
            console.log("ERROR:" + msg);
        });
    },
    handleToggle: function () {
        this.setState({
            open: !this.state.open
        }, this.getProjectList);
    },
    searchProject: function () {
        var input = document.getElementById("search_input").value;
        var myCreation = project_created;
        var participation = project_participate;
        var myCreationFiltered = [];
        var participationFiltered = [];
        if (input.length > 0) {
            for (let i = 0; i < myCreation.length; i++) {
                if (myCreation[i].title.indexOf(input) >= 0) {
                    myCreationFiltered.push(myCreation[i]);
                }

            }
            for (let i = 0; i < participation.length; i++) {
                if (participation[i].title.indexOf(input) >= 0) {
                    participationFiltered.push(participation[i]);
                }

            }
        } else {
            myCreationFiltered = myCreation;
            participationFiltered = participation;
        }
        project_created_info = myCreationFiltered;
        project_participate_info = participationFiltered;
        this.getProjectList();
    },
    render(){

        return (
            <LeftNav openRight={true} docked={false} open={this.state.open}
                     onRequestChange={open => this.setState({open})}
                     style={{width:"242px", backgroundColor:"#EDEDED",overflowY:"auto" }}>
                <p style={{marginTop: "54px", marginLeft:"22px",marginBottom:"18px",fontSize:"16px",fontFamily:'Microsoft YaHei'}}>
                    <i style={{marginRight: "10px"}}
                       className="fa fa-list-ul"
                       ariaHidden="true"/>
                    <strong>项目列表</strong>
                </p>
                <div
                    style={{width:"200px",height:"22px",border:"solid 1px lightgray",marginLeft:"22px",marginBottom:"18px"}}>
                    <input type="text" id="search_input"
                           style={{width: "160px",height:"20px",border: "none",float: "left",outline: "none"}}
                           onChange={this.searchProject}/>
                    <span className="glyphicon glyphicon-search"
                          style={{float:"right",height:"20px",width: "20px",marginTop: "2px",marginBottom: "auto"}}
                          aria-hidden="true"/>
                </div>
                <p style={{padding: "0px 20px", fontSize:"15px"}}>
                    <i style={{marginRight: "10px"}}
                       className="fa fa-user"
                       ariaHidden="true"/>
                    <strong>我的项目</strong>
                </p>
                <div>
                    {this.state.project_created_item}
                </div>

                <p style={{padding: "0px 20px", fontSize:"15px"}}><i style={{marginRight: "10px"}}
                                                                     className="fa fa-users"
                                                                     ariaHidden="true"/><strong>参与项目</strong>
                </p>
                <div>
                    {this.state.project_participate_item}
                </div>
            </LeftNav>
        )
    }
});

module.exports = ProjectListNav;